<template>
  <div class="xaiolu">
    <div class="search">
      <van-search v-model="searchValue" placeholder="请输入商品名称" background="none" @search="onSearch"/>
    </div>
    <van-tabs sticky>
      <van-tab v-for="tab in tabbar" :key="tab.id">
        <template slot="title">
          <div>
            <div class="luluchange">
              <img :src="tab.thumb" class="lulu">
            </div>
            <div>{{tab.advname}}</div>
          </div>
        </template>
        <goods-list
          :shopId="user.upshopTid"
          @addCart="addCart"
          :categoryId="tab.categoryid"
          :keyword="searchValue"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>


<script>
import { Search, Tabs, Tab } from "vant";
import { SHOP_PRODUCT_SHENXIAN, ALL_GOODS } from "@/api/shop";
import loadMore from "@/vue/mixin/list-load-more";
import GoodsList from "@/vue/components/goods-list/";
import buyAction from "@/vue/mixin/buy-action";
export default {
  mixins: [buyAction, loadMore],
  name: "xiaolu",
  data() {
    return {
      searchValue: "",
      tabbar: [],
      goodsData: [],
      categoryId: ""
    };
  },
  methods: {
    onSearch() {
      this.searchValue;
    }
  },
  created() {
    this.$reqGet(SHOP_PRODUCT_SHENXIAN).then(res => {
      this.tabbar = res.data.data;
    });
  },
  components: {
    [Search.name]: Search,
    [GoodsList.name]: GoodsList,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  }
};
</script>

<style lang="scss">
.luluchange {
  height: 43px;
  margin-top: 5px;
  .lulu {
    width: 50px;
    height: 50px;
  }
}

.search {
  width: 100%;
  height: 80px;
  background-image: url("../../assets/images/xiaolu.png");
  background-size: 100%;
  background-repeat: no-repeat;
  .van-search {
    padding: 9% 25%;
    .van-cell {
      border-radius: 20px;
    }
  }
}
.xaiolu {
  .van-tabs {
    padding-top: 83px;
    .van-tabs__wrap {
      height: 80px;
    }
  }
}
</style>